<template>
	<div>
		<el-row :gutter="24" v-if="!detailShow">
			
			<el-col :span="1" style="margin-right:10px;">
				<p class="queryLabel">统计月份:</p>
			</el-col>
			<el-col :span="4">
				<el-date-picker size="small" v-model="time" format="yyyy-MM" :editable=false type="month" placeholder="选择月份">
				</el-date-picker>
			</el-col>
			<el-col :span="6" :offset="1" style="padding-left: 0px;">
				<el-button type="primary" size="small" v-on:click='baseQuery'>查询</el-button>
				<el-button type="primary" size="small" v-on:click="processOut" v-if="table">导出</el-button>
				<el-button type="primary" size="small" v-on:click='lookReport'>报表说明</el-button>
				<el-button class="el-icon-menu" type="primary" size="small" v-on:click='change'></el-button>
			</el-col>
		</el-row>

		<div class="report_Fixedwidth" v-if="table&&!detailShow">
			<table class="report_table" cellspacing="0" id="process" cellpadding="0" width="1350px">
				<tbody>
					<tr class="texttbody">
						<th scope="col" rowspan="3" colspan="4">公司</th>
						<th scope="col" rowspan="3" colspan="2">客户经理</th>
						<th scope="col" colspan="22">任务处理</th>
						<th scope="col" colspan="9">客户维系</th>
					</tr>
					<tr class="texttbody">
						<td colspan="3">今日任务</td>
						<td colspan="8">本月全部任务</td>
						<td colspan="9">本月已完成任务</td>
						<td colspan="2" rowspan="2">过期任务</td>
						<td colspan="2" rowspan="2">客户经理</td>
						<td colspan="3">今日</td>
						<td colspan="2">昨日</td>
						<td colspan="2">本月</td>
					</tr>
					<tr class="texttbody">
						<td style="width: 40px">总数</td>
						<td style="width: 40px;">已完成</td>
						<td style="width: 40px">关闭</td>

						<td style="width: 40px">保险</td>
						<td style="width: 40px">保养</td>
						<td style="width: 40px">流失</td>
						<td style="width: 40px">关爱</td>
						<td style="width: 40px">美容</td>
						<td style="width: 40px">卡</td>
						<td style="width: 40px">自定义</td>
						<td style="width: 40px">总计</td>

						<td style="width: 40px">保险</td>
						<td style="width: 40px">保养</td>
						<td style="width: 40px">流失</td>
						<td style="width: 40px">关爱</td>
						<td style="width: 40px">美容</td>
						<td style="width: 40px">卡</td>
						<td style="width: 40px">自定义</td>
						<td style="width: 40px">关闭</td>

						<td style="width: 40px">总计</td>

						<td style="width: 40px">维系</td>
						<td style="width: 40px">电话</td>
						<td style="width: 40px">预约</td>
						<td style="width: 40px">维系</td>
						<td style="width: 40px">电话</td>
						<td style="width: 40px">维系</td>
						<td style="width: 40px">电话</td>
					</tr>
					<tr v-for="item in tableData.dataList">
						<td colspan="4">{{item.oName}}</td>

						<td colspan="2">{{item.uName}}</td>

						<td>
							<!--<div v-if="item.totalToday != '0'">
								<el-button type="text" @click="lookdetail(item,'0','day','')">{{item.totalToday}}</el-button>
							</div>
							<div v-if="item.totalToday == '0'">-->
							{{item.totalToday == null?"0":item.totalToday}}
							<!--</div>-->
						</td>
						<td style="color: red;">
							<!--<div v-if="item.doneToday != '0'">
								<el-button type="text" @click="lookdetail(item,'1','day','')">{{item.doneToday}}</el-button>
							</div>
							<div v-if="item.doneToday == '0'">-->
							{{item.doneToday== null?"0":item.doneToday}}
							<!--</div>-->
						</td>
						<td>
							<!--<div v-if="item.closeToday != '0'">
								<el-button type="text" @click="lookdetail(item,'2','day','')">{{item.closeToday}}</el-button>
							</div>
							<div v-if="item.closeToday == '0'">-->
							{{item.closeToday== null?"0":item.closeToday}}
							<!--</div>-->
						</td>

						<td>
							<!--<div v-if="item.bx != '0'">
								<el-button type="text" @click="lookdetail(item,'0','month','bx')">{{item.bx}}</el-button>
							</div>
							<div v-if="item.bx == '0'">-->
							{{item.bx== null?"0":item.bx}}
							<!--</div>-->
						</td>
						<td>
							<!--<div v-if="item.baoy != '0'">
								<el-button type="text" @click="lookdetail(item,'0','month','by')">{{item.baoy}}</el-button>
							</div>
							<div v-if="item.baoy == '0'">-->
							{{item.baoy== null?"0":item.baoy}}
							<!--</div>-->
						</td>
						<td>
							<!--<div v-if="item.ls != '0'">
								<el-button type="text" @click="lookdetail(item,'0','month','ls')">{{item.ls}}</el-button>
							</div>
							<div v-if="item.ls == '0'">-->
							{{item.ls== null?"0":item.ls}}
							<!--</div>-->
						</td>
						<td>
							<!--<div v-if="item.ga != '0'">
								<el-button type="text" @click="lookdetail(item,'0','month','ga')">{{item.ga}}</el-button>
							</div>
							<div v-if="item.ga == '0'">-->
							{{item.ga== null?"0":item.ga}}
							<!--</div>-->
						</td>
						
						<td>
							{{item.mr== null?"0":item.mr}}
						</td>
						
						<td>
							{{item.k== null?"0":item.k}}
						</td>
						
						
						<td>
							<!--<div v-if="item.zdy != '0'">
								<el-button type="text" @click="lookdetail(item,'0','month','zdy')">{{item.zdy}}</el-button>
							</div>
							<div v-if="item.zdy == '0'">-->
							{{item.zdy== null?"0":item.zdy}}
							<!--</div>-->
						</td>
						<td>
							<!--<div v-if="item.totalMon != '0'">
								<el-button type="text" @click="lookdetail(item,'0','month','')">{{item.totalMon}}</el-button>
							</div>
							<div v-if="item.totalMon == '0'">-->
							{{item.totalMon== null?"0":item.totalMon}}
							<!--</div>-->
						</td>

						<td>
							<!--<div v-if="item.doneBx != '0'">
								<el-button type="text" @click="lookdetail(item,'1','month','bx')">{{item.doneBx}}</el-button>
							</div>
							<div v-if="item.doneBx == '0'">-->
							{{item.doneBx== null?"0":item.doneBx}}
							<!--</div>-->
						</td>
						<td>
							<!--<div v-if="item.doneBy != '0'">
								<el-button type="text" @click="lookdetail(item,'1','month','by')">{{item.doneBy}}</el-button>
							</div>
							<div v-if="item.doneBy == '0'">-->
							{{item.doneBy== null?"0":item.doneBy}}
							<!--</div>-->
						</td>
						<td>
							<!--<div v-if="item.doneLs != '0'">
								<el-button type="text" @click="lookdetail(item,'1','month','ls')">{{item.doneLs}}</el-button>
							</div>
							<div v-if="item.doneLs == '0'">-->
							{{item.doneLs== null?"0":item.doneLs}}
							<!--</div>-->
						</td>
						<td>
							<!--<div v-if="item.doneGa != '0'">
								<el-button type="text" @click="lookdetail(item,'1','month','ga')">{{item.doneGa}}</el-button>
							</div>
							<div v-if="item.doneGa == '0'">-->
							{{item.doneGa== null?"0":item.doneGa}}
							<!--</div>-->
						</td>
						<td>
							<!--<div v-if="item.doneGa != '0'">
								<el-button type="text" @click="lookdetail(item,'1','month','ga')">{{item.doneGa}}</el-button>
							</div>
							<div v-if="item.doneGa == '0'">-->
							{{item.doneMr== null?"0":item.doneMr}}
							<!--</div>-->
						</td>
						<td>
							<!--<div v-if="item.doneGa != '0'">
								<el-button type="text" @click="lookdetail(item,'1','month','ga')">{{item.doneGa}}</el-button>
							</div>
							<div v-if="item.doneGa == '0'">-->
							{{item.doneK== null?"0":item.doneK}}
							<!--</div>-->
						</td>
						<td>
							<!--<div v-if="item.doneZdy != '0'">
								<el-button type="text" @click="lookdetail(item,'1','month','zdy')">{{item.doneZdy}}</el-button>
							</div>
							<div v-if="item.doneZdy == '0'">-->
							{{item.doneZdy== null?"0":item.doneZdy}}
							<!--</div>-->
						</td>
						<td>
							<!--<div v-if="item.close != '0'">
								<el-button type="text" @click="lookdetail(item,'2','month','')">{{item.close}}</el-button>
							</div>
							<div v-if="item.close == '0'">-->
							{{item.close== null?"0":item.close}}
							<!--</div>-->
						</td>
						<td>
							<!--<div v-if="item.doneTotalMon != '0'">
								<el-button type="text" @click="lookdetail(item,'1','month','')">{{item.doneTotalMon}}</el-button>
							</div>
							<div v-if="item.doneTotalMon == '0'">-->
							{{item.doneTotalMon== null?"0":item.doneTotalMon}}
							<!--</div>-->
						</td>

						<td colspan="2">
							<!--<div v-if="item.overdue != '0'">
								<el-button type="text" @click="lookdetail(item,'0','before','')">{{item.overdue}}</el-button>
							</div>
							<div v-if="item.overdue == '0'">-->
							{{item.overdue== null?"0":item.overdue}}
							<!--</div>-->
						</td>

						<td colspan="2">{{item.uName}}</td>
						<td>{{item.contactToday== null?"0":item.contactToday}}</td>
						<td>{{item.telToday== null?"0":item.telToday}}</td>
						<td>{{item.yy== null?"0":item.yy}}</td>
						<td>{{item.contactYes== null?"0":item.contactYes}}</td>
						<td>{{item.telYes== null?"0":item.telYes}}</td>
						<td>{{item.contactMon== null?"0":item.contactMon}}</td>
						<td>{{item.telMon== null?"0":item.telMon}}</td>

					</tr>
				</tbody>
			</table>

		</div>
		<el-row :gutter="24" v-if="detailShow">
			<el-col :span="24" style="text-align: right;">
				<el-button type="primary" size="small" @click="back">返回</el-button>
			</el-col>
		</el-row>
		<el-row :gutter="24" v-if="detailShow">
			<el-table :data="detailData.dataList" border style="width: 100%;align-content: center;">
				<el-table-column label="车主姓名" prop="ownerName" width="100">
				</el-table-column>
				<el-table-column label="车主手机" prop="ownerPhone" width="150">
				</el-table-column>
				<el-table-column label="车主电话" prop="ownerTel" width="150">
				</el-table-column>
				<el-table-column label="品牌" prop="brand" width="100">
				</el-table-column>
				<el-table-column label="车系" prop="series" width="150">
				</el-table-column>
				<el-table-column label="车型" prop="model" width="100">
				</el-table-column>
				<el-table-column label="车主车辆配置" prop="configure" width="200">
				</el-table-column>
				<el-table-column label="是否返厂" prop="isBack" :formatter="isBackCov" width="100">
				</el-table-column>
				<el-table-column label="提醒时间" prop="expectDate" width="140">
				</el-table-column>
				<el-table-column label="完成时间" prop="dealDate" width="140">
				</el-table-column>
				<el-table-column label="状态" prop="status" :formatter="statusCov" width="80">
				</el-table-column>
				<el-table-column label="内容" prop="content" width="300">
				</el-table-column>
			</el-table>
			<el-pagination small @size-change="handleSizeChanges" @current-change="handleCurrentChanges" :current-page="CurentPages" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout=" total,prev, pager, next" :total="detailData.total">
			</el-pagination>
		</el-row>

		<div v-if="!table">
			<div class="report_Fixedwidth">
				<div class="report_card" v-for="item in tableData.dataList">
					<div class="report_kapian">
						{{item.uName}}
						<br> 客户经理
					</div>
					<div class="report_text">
						今日维系/电话：{{item.contactToday}}/{{item.telToday}}
						<br> 预约数：{{item.yy}}
						<br> 昨日维系/电话：{{item.contactYes}}/{{item.telYes}}
						<br> 今日任务/已完成：{{item.totalToday}}/{{item.doneToday}}
						<br> 本月任务/已完成：{{item.totalMon}}/{{item.doneTotalMon}}
						<br> 过期任务：{{item.overdue}}
						<br>
					</div>
				</div>
			</div>
		</div>
		<el-dialog title="报表说明" v-model="reportShow" size="tiny">
			<div style="overflow-y: scroll;height: 400px;">
				<b style="font-size: 15px;">SA过程管理：</b>&nbsp;&nbsp;<b style="font-size: 12px;">CRM系统生成的任务的执行情况跟踪</b><br><br>
				<b style="font-size: 15px;">客户经理:</b>&nbsp;&nbsp;<b style="font-size: 12px;">任务处理人员（未分配代表未下发的任务）</b><br><br>
				<b style="font-size: 15px;">今日任务-总数：</b>&nbsp;&nbsp;<b style="font-size: 12px;">该人员名下所有提醒日期在今天之前的未处理的任务数与提醒日期为今天的任务数</b><br><br>
				<b style="font-size: 15px;">今日任务-已完成：</b>&nbsp;&nbsp;<b style="font-size: 12px;">该人员今日完成的任务，</b><br><br>
				<b style="font-size: 15px;">今日任务-关闭：</b>&nbsp;&nbsp;<b style="font-size: 12px;">该人员今日关闭的任务</b><br><br>
				<b style="font-size: 15px;">本月全部任务：</b>&nbsp;&nbsp;<b style="font-size: 12px;">该人员名下提醒日期在当月的按保险、保养、流失、关爱、自定义的分类统计的任务数，总计为该人员名下提醒日期在当月的所有任务数</b><br><br>
				<b style="font-size: 15px;">本月已完成任务：</b>&nbsp;&nbsp;<b style="font-size: 12px;">保险、保养、流失、关爱、自定义为该人员在当月完成（处理日期在当月）的对应类型的任务数，关闭为该人员在当月关闭的所有任务数，总计为该人员在当月处理的所有任务数</b><br><br>
				<b style="font-size: 15px;">过期任务：</b>&nbsp;&nbsp;<b style="font-size: 12px;">截止到当天，所有提醒日期在当天之前的未处理的任务数</b><br><br>
				<b style="font-size: 15px;">客户维系-今日-维系：</b>&nbsp;&nbsp;<b style="font-size: 12px;">该人员今天完成的任务数</b><br><br>
				<b style="font-size: 15px;">客户维系-今日-电话：</b>&nbsp;&nbsp;<b style="font-size: 12px;">该人员今天打过电话的任务数</b><br><br>
				<b style="font-size: 15px;">客户维系-今日-预约：</b>&nbsp;&nbsp;<b style="font-size: 12px;">该人员今天完成的任务中需要持续跟踪的任务数</b><br><br>
				<b style="font-size: 15px;">客户维系-昨日-维系：</b>&nbsp;&nbsp;<b style="font-size: 12px;">该人员昨天完成的任务数</b><br><br>
				<b style="font-size: 15px;">客户维系-昨日-电话：</b>&nbsp;&nbsp;<b style="font-size: 12px;">该人员昨天打过电话的任务数</b><br><br>
				<b style="font-size: 15px;">客户维系-本月-维系：</b>&nbsp;&nbsp;<b style="font-size: 12px;">该人员本月完成的任务数</b><br><br>
				<b style="font-size: 15px;">客户维系-本月-电话：</b>&nbsp;&nbsp;<b style="font-size: 12px;">该人员本月打过电话的任务数</b><br><br>
			</div>
		</el-dialog>
		<exports :tableId="tableId" :excelName="excelName" :template="template" v-on:backFunction="backFunction"></exports>

	</div>
</template>
<script>
	import exports from '../../plugins/exportModule.vue'
	import echarts from 'echarts'
	export default {
		data: function() {
			return {
				//查询条件
				area: '',
				brand: '',
				companyId: window.localStorage.getItem("companyId"),
				areaCombo: [],
				brandCombo: [],
				companyCombo: [],
				//baobiao shuoming
				reportShow: false,
				//表格显示
				table: true,
				msg: "123",
				//页码数
				CurentPage: 1,
				//每页的数量
				page: this.page,
				//分组数据
				tableData: {
					total: 0,
					dataList: []
				},
				time: '',
				//单行数据
				rowData: [],
				//个人信息展示
				formShow: false,
				//表格id
				tableId: '',
				//表格路径
				template: '',
				//biaogemingcheng
				excelName: 'SA过程管理.xls',
				CurentPages: 1,
				//Mingxi
				detailShow: false,
				detailQueryData: {
					saId: '',
					type: '',
					mDate: '',
					status: '',
					pCode: '',
					companyId: window.localStorage.getItem("companyId"),
				},
				detailData: {
					total: 0,
					dataList: []
				},
			}
		},
		methods: {
			handleSizeChanges: function() {

			},
			//baoxiandan fenye
			handleCurrentChanges: function(currentPage) {
				this.$data.CurentPages = currentPage;
				this.detatilQuery();
			},
			//fenyechaxun 
			detatilQuery: function() {
				this.$http({
					method: 'POST',
					url: this.API_ROOT + '/crm/kpi/SaProcess/detail', //url
					params: { //发送的参数
						companyId: this.$data.detailQueryData.companyId,
						saId: this.$data.detailQueryData.saId,
						mDate: this.$data.detailQueryData.mDate,
						pCode: this.$data.detailQueryData.pCode,
						type: this.$data.detailQueryData.type,
						status: status,
						limit: this.page.pageSize,
						start: this.$data.CurentPages
					}
				}).then(function(resp) {
					debugger;
					resp.data.total = parseInt(resp.data.total);
					this.$data.detailData = resp.data;
				}, function(error) {
					// error
				})
			},
			//返回
			back: function() {
				this.$data.detailShow = false;
				this.$data.CurentPages = 1;
			},
			//查看明细
			lookdetail: function(item, status, type, pCode) {
				this.$data.detailData.dataList = [],
					this.$data.detailShow = true;
				this.$data.detailQueryData.saId = item.saId;
				if(this.$data.time == '') {
					var tiems = new Date();
					tiems = this.moment(tiems).format("YYYY-MM")
				} else {
					var tiems = this.moment(this.$data.time).format("YYYY-MM")
				}
				this.$data.detailQueryData.mDate = tiems;
				this.$data.detailQueryData.type = type;
				this.$data.detailQueryData.pCode = pCode;
				this.$data.detailQueryData.status = status;
				this.$data.detailQueryData.companyId = item.companyId;
				this.$http({
					method: 'POST',
					url: this.API_ROOT + '/crm/kpi/SaProcess/detail', //url
					params: { //发送的参数
						saId: this.$data.detailQueryData.saId,
						mDate: this.$data.detailQueryData.mDate,
						pCode: this.$data.detailQueryData.pCode,
						type: this.$data.detailQueryData.type,
						status: this.$data.detailQueryData.status,
						companyId: this.$data.detailQueryData.companyId,
						limit: this.page.pageSize,
						start: this.$data.CurentPages
					}
				}).then(function(resp) {
					debugger;
					resp.data.total = parseInt(resp.data.total);
					this.$data.detailData = resp.data;
				}, function(error) {
					// error
				})

			},
			statusCov: function(row, column) {
				if(row.status == 0) {
					return '未完成';
				} else if(row.status == 1) {
					return '完成';
				} else if(row.status == 2) {
					return '关闭';
				}
			},
			isBackCov: function(row, column) {
				if(row.isBack == 0) {
					return '否';
				}
				if(row.isBack == 1) {
					return '是'
				}
			},
			//daochu 
			processOut: function() {
				this.$data.tableId = "process";
				this.$data.template = "<template><div><div><table border='1'>{table}</table></div></div></template>";
			},
			//daochu fanhuihanshu
			backFunction: function() {
				this.$data.tableId = "";
			},
			//查看报表说明
			lookReport: function() {
				this.$data.reportShow = true;
			},
			//表格转换
			change: function() {
				if(this.$data.table == true) {
					this.$data.table = false;
				} else {
					this.$data.table = true;
				}
			},
			//表格双击事件
			dblclick: function(row, event) {
				this.$data.formShow = true;
				this.$data.rowData = row;
			},
			//查询
			baseQuery: function() {
				debugger;
				var dates;
				if(this.$data.time == '') {
					dates = this.$data.time;
				} else {
					dates = this.moment(this.$data.time).format("YYYY-MM");
				}
				if(this.$data.companyId == '') {
					this.$message.error("请选择公司！")
				} else {
					this.$http.post(this.API_ROOT + '/crm/kpi/SaProcess', this.$data.condition, {
							params: {
								mDate: dates,
								companyId: this.$data.companyId,
								area: this.$data.area,
								brand: this.$data.brand,
								start: this.$data.CurentPage,
								limit: 50
							}
						})
						.then(resp => {
							if(resp.data.success) {
								resp.data.total = parseInt(resp.data.total);
								// es5写法
								this.$data.tableData = resp.data;

							} else {
								//debugger;
								this.$message.error(resp.data.msg);
							}
						}, resp => {});
				}
			},
			//列表，分页大小切换
			handleSizeChange: function() {},
			//列表,当前页切换
			handleCurrentChange: function(currentPage) {
				this.$data.CurentPage = currentPage;
				//this.$data.dictGroup = '';
				this.baseQuery();
			},
			//状态转换
			statusCov: function(row, column) {
				return row.newRemind == "0" ? '已预约' : '未预约';
			},
			//时间转换
			buyDates: function(row, column) {
				if(row.recordLength == "" || row.recordLength == null) return "";
				return moment(Number(row.recordLength)).format("YYYY-MM-DD");
			},
		
			
		},
		//表单创建时执行
		created: function() {
			this.baseQuery();
			
		},
		components: {
			exports
		}
	}
</script>
<style>
	.el-table .info-row {
		height: 10px !important;
	}
	
	.item {
		width: 30px;
	}
	
	.el-form-item {
		clear: both;
	}
	
	.el-dropdown .el-button-group,
	.el-table .el-tooltip,
	.el-table .el-tooltip__rel {
		display: inline;
	}
	
	.el-table {
		height: 100%;
		width: 100%;
	}
	
	#el-select {
		width: 200px;
	}
	
	.table .td {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
</style>